﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <title></title>
    <link href="../src/css/rayui.css" rel="stylesheet" />
    <script src="../plugins/jquery-1.12.4.js"></script>
    <script src="../src/js/rayui.js"></script>
    <style>
        body {
            padding: 15px;
            margin: 0;
        }
    </style>
    <script>

        var data = [], index = 0;
        var now = new Date(2017, 10, 1);
        var mm = now.getMinutes();

        function getNowFormatDate(date) {
            var seperator1 = "-";
            var seperator2 = ":";
            var year = date.getFullYear();
            var month = date.getMonth() + 1;
            var strDate = date.getDate();
            if (month >= 1 && month <= 9) {
                month = "0" + month;
            }
            if (strDate >= 0 && strDate <= 9) {
                strDate = "0" + strDate;
            }
            var currentdate = year +
                seperator1 +
                month +
                seperator1 +
                strDate +
                " " +
                date.getHours() +
                seperator2 +
                date.getMinutes() +
                seperator2 +
                date.getSeconds();
            return currentdate;
        }

        var icons = ["layer-icon-0", "layer-icon-1", "layer-icon-2", "layer-icon-3", "layer-icon-4", "layer-icon-5", "layer-icon-20", "layer-icon-21", "layer-icon-22", "layer-icon-23", "layer-icon-24", "layer-icon-25"],
            iconsCount = icons.length;

        function getNodes(count, prefix) {
            var tmpdata = [];
            for (var i = 0; i < count; i++) {
                now.setMinutes(mm + i);
                var model = {
                    id: index++,
                    name: "我是菜单" + (prefix || '') + i,
                    icon: "" + icons[i % iconsCount],
                    createTime: getNowFormatDate(now)
                }
                tmpdata.push(model);
            }
            return tmpdata;
        }

        data = getNodes(3);

        for (var i = 0; i < data.length; i++) {
            data[i].children = getNodes(3, data[i].id + "-");
        }

    </script>
</head>
<body>

    <a class="btn-link" href="#anchor">使用说明</a>

    <br />
    <br />
    <div class="card card-color-orange">虽然组件名叫selecttree，样式和<a class="btn-link" href="/example/select.html" target="_blank">select</a>也一样，但是使用方式却大不相同，他更接近与tree，使用时需要特别注意</div>

    <div class="row">
        <div class="col-sm-4">
            <h4>4、ajax请求下拉树数据</h4>
            <select id="selecttree4" class="rayui-select"></select>
            <a class="rayui-btn btn-primary getValue">获取选中数据</a>
        </div>
        <div class="col-sm-8" style="min-width: 400px">
            <h4>5、支持多选</h4>
            <select id="selecttree5" class="rayui-select full-width" multiple></select>
            <a class="rayui-btn btn-primary getValue">获取选中数据</a>
            <a class="rayui-btn btn-primary" id="selectValue" data-select="name=我是菜单1-2">选中数据</a>
            <a class="rayui-btn btn-primary" id="unselectValue" data-select="name=我是菜单1-2">取消选中</a>
            <a class="rayui-btn btn-primary" id="clearValue">清除选中</a>
        </div>
    </div>

    <div class="row sameHeight">
        <div class="col-sm-4">
            <h4>1、没有默认值，捕获点击事件</h4>
            <select id="selecttree1" class="rayui-select"></select>
            <a class="rayui-btn btn-primary" id="setHeight" data-height="240">设置下拉框高度为400px</a>
        </div>
        <div class="col-sm-4">
            <h4>2、有默认值，并且支持过滤</h4>
            <!--<select id="selecttree2" class="rayui-select"></select>-->
            <select id="selecttree2" class="rayui-select"></select>
            <a class="rayui-btn btn-primary getValue">获取选中数据</a>
        </div>
        <div class="col-sm-4">
            <h4>3、多级菜单，自定义显示数据</h4>
            <select id="selecttree3" class="rayui-select"></select>
            <a class="rayui-btn btn-primary getValue">获取选中数据</a>
        </div>
    </div>

    <div style="position: fixed; bottom: 0; right: 10px; width: 300px;background-color: #b5bf53">
        <div class="col-12">
            <h4>我就是来测测上面显示的</h4>
            <select id="selecttree100" class="rayui-select"></select>
        </div>
    </div>

    <script>
        rayui.use(["elem", "selecttree", "layer"], function () {

            var tree = rayui.selecttree,
                layer = rayui.layer;

            function initTree100() {
                var tmpData = $.extend(true, [], data);
                var first = tmpData[0].children[0];
                first.children = getNodes(2, "0-0-");
                first = first.children[0];
                first.children = getNodes(2, "0-0-0-");

                var treeIns = tree.render({
                    elem: "#selecttree100",
                    data: tmpData,
                    localSearch: true,
                    icon: false,
                    selectedValues: 20,
                    selectDataType: "html",
                    formatter: function (v, data) {
                        return '<i class="ra layer-icon ' + data.icon + '" style="font-size:18px;"></i>&nbsp;<span>' + v + '</span>';
                    }
                });
            }

            function initTree5() {
                var tmpData = $.extend(true, [], data);
                var first = tmpData[0].children[0];
                first.children = getNodes(2, "0-0-");
                first = first.children[0];
                first.children = getNodes(2, "0-0-0-");

                var treeIns = tree.render({
                    elem: "#selecttree5",
                    data: tmpData,
                    localSearch: true,
                    icon: false,
                    skin:"green",
                    selectedValues: 2,
                    selectDataType: "html",
                    formatter: function (v, data) {
                        return '<i class="ra layer-icon ' + data.icon + '" style="font-size:18px;"></i>&nbsp;<span>' + v + '</span>';
                    }
                });
                $("#selectValue").click(function () {
                    treeIns.select(3);
                });
                $("#unselectValue").click(function () {
                    treeIns.unselect(3);
                });
                $("#clearValue").click(function () {
                    treeIns.clearSelect();
                });
            }

            function initTree4() {
                var treeIns = tree.render({
                    elem: "#selecttree4",
                    url: "/Data.ashx?action=GetTreeGrid",
                    localSearch: true,
                    icon: false,
                    selectedValues: 2,
                    selectDataType: "html",
                    onComplete: function () {
                        layer.tips("加载完毕", $("#selecttree4").next(), {
                            offset: 2, //右边
                            bgColor: "#abe44b",
                            time: 2000
                        });
                    },
                    formatter: function (v, data) {
                        return '<i class="ra layer-icon ' + data.icon + '" style="font-size:18px;"></i>&nbsp;<span>' + v + '</span>';
                    }
                });
                layer.tips("正在加载……", $("#selecttree4").next(), {
                    offset: 2, //右边
                    bgColor: "#f00"
                });
            }

            function initTree3() {
                var tmpData = $.extend(true, [], data);
                var first = tmpData[0].children[0];
                first.children = getNodes(2, "0-0-");
                first = first.children[0];
                first.children = getNodes(2, "0-0-0-");

                var treeIns = tree.render({
                    elem: "#selecttree3",
                    data: tmpData,
                    localSearch: true,
                    icon: false,
                    selectedValues: 12,
                    selectDataType: "html",
                    formatter: function (v, data) {
                        return '<i class="ra layer-icon ' + data.icon + '" style="font-size:18px;"></i>&nbsp;<span>' + v + '</span>';
                    }
                });
            }

            function initTree2() {
                var treeIns = tree.render({
                    elem: "#selecttree2",
                    data: data,
                    //selectedValues: 3,
                    selectedValues: { key: "name", value: "我是菜单0-0" },
                    localSearch: true
                });
            }

            function initTree1() {
                var tmpData = $.extend(true, [], data);
                tmpData[0].children[0].disabled = true;
                var treeIns = tree.render({
                    elem: "#selecttree1",
                    data: tmpData
                });
                treeIns.on("click", function (data, $li) {
                    layer.msg("您点击了 " + data.name, { time: 2000, shade: false });
                });
                $("#setHeight").click(function () {
                    var height = $(this).data("height"),
                        toheight = height === 240 ? 400 : 240;
                    $(this).data("height", toheight).html("设置下拉框高度为" + height + "px");
                    treeIns.setHeight(toheight);
                });
            }

            initTree1();
            initTree2();
            initTree3();
            initTree4();
            initTree5();
            initTree100();

            $(function () {
                $(".getValue").click(function () {
                    var val = $(this).prev().prev().val();
                    layer.alert("select的value=" + val);
                });
            });
        })

    </script>


    <h4 id="anchor">使用说明</h4>
    <pre style="color: #159200; word-wrap: break-word; white-space: pre-wrap;">

使用说明：

selecttree是在tree基础上进行开发的，tree支持的属性selecttree大部分都支持
其中变动：
fieldId: "id", //数据列，数据唯一值
selectDataType: 选中数据显示方案，可选html|text|data，默认html
localSearch：改为可选true|false，没有input对象参数
其中删除：
width

额外增加：
属性：
skin：皮肤支持
selectedValues：默认值，字符串|数字|对象|数组对象，比如：6，"12"，{key: "name", value:"你好"}，
                  [{key: "name", value:"你好"},{key: "id", value:12}]，其中对象格式必须是key-value模式。



方法：
select:function(key, value)：外部控制选中数据，key不填时默认对应fieldid，例如：
                                        a）select(12)会把fieldid=12的数据选中
                                        b）select("name", "我是0-0")会把数据中name="我是0-0"的数据选中
unselect:function(key, value)：外部控制取消选中数据，使用方法同上，此外，单选情况下，调用此方法会清除选中，参数无效


</pre>

</body>
</html>